<template>
	<view class="addAppeal">
		<nav-bars title="争议处理" bgColor="transparent" fontColor="#fff"></nav-bars>
		<view class="topImg"><view class="topBg"></view></view>
		<view class="content" :style="'padding-top:'+navHeight+'rpx;'">
			<text class="title">请选择争议处理类型</text>
			<u-radio-group v-model="value" activeColor="#E7AD14" @change="radioGroupChange">
				<u-radio 
					@change="radioChange" 
					v-for="(item, index) in list" :key="index" 
					:name="item.name"
					:disabled="item.disabled"
				>
					{{item.name}}
				</u-radio>
			</u-radio-group>
			<text class="title" style="display: block;margin-top: 50rpx;">填写备注</text>
			<view class="text">
				<textarea v-model="appeal_desc" style="width:100%;height: 200rpx;" maxlength="200" @input="changeText" placeholder="请描述争议内容，或上传图片凭证" />
				<view class="num">{{num}}/200</view>
				<!-- 图片 -->
				<view class="mediaBox" v-if="type==1">
					<view class="imgBox" v-for="(item,index) in imgList" :key="index">
						<image :src="item.path" mode=""></image>
						<image style="position: absolute;top: 0;right: 0;width: 40rpx;height: 40rpx;"
							:src="`${baseImg}/static/constr/remove.png`" mode="" @click="removeImg(index,1)"></image>
					</view>
					<!-- <image :src="item.path" mode="" v-for="(item,index) in imgList" :key="index"></image> -->
					<view class="uploadBox" @click="uploadFN">
						<image :src="`${baseImg}/static/constr/camera.png`" mode=""></image>
						图片
					</view>
				</view>
				<!-- 视频 -->
				<view class="mediaBox" v-if="type==2">
					<view class="videoBox" v-if="Object.keys(videoUrl).length">
						<video :src="videoUrl.path" controls></video>
						<image style="position: absolute;top: 0;right: 0;width: 40rpx;height: 40rpx;"
							:src="`${baseImg}/static/constr/remove.png`" mode="" @click="removeImg()"></image>
					</view>
					<view class="uploadBox" @click="uploadFN" v-if="!Object.keys(videoUrl).length">
						<image :src="`${baseImg}/static/constr/camera.png`" mode=""></image>
						视频
					</view>
				</view>
				<view style="display: flex;align-items: center;font-size: 28rpx;">
					上传视频：
					<u-switch size="40" @change="changeType" active-color="#E7AD14" v-model="TypeChecked"></u-switch>
				</view>
			</view>
		</view>
		<view class="btn">
			<button type="default" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import URL from '@/config/url.js'
	import service_decoration from '@/service/decoration.js'
	export default{
		data(){
			return{
				baseImg:this.$static,
				list:[{
					name:'故意拖延工期',
					disabled:false
				},{
					name:'施工工艺不规范',
					disabled:false
				},{
					name:'工地事故',
					disabled:false
				},{
					name:'无理由增项',
					disabled:false
				},{
					name:'其他',
					disabled:false
				},],
				value:'',//选择的争议类型
				navHeight:0,
				appeal_desc:'',//争议描述
				num:0,
				imgList:[], //图片
				TypeChecked:false,
				type:1,
				videoUrl:{}, //视频
				orderType:'',
				data:{},//订单传过来的数据
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
			let height = uni.getStorageSync('StatusBarHeight').height * 2
			this.navHeight = 316 - height
			console.log(options,'options')
			this.data = JSON.parse(decodeURIComponent(options.data))
			this.orderType = options.orderType
			console.log(this.data,'数据')
			if(options.orderType=='builder'){
				this.list = [{
					name:'故意拖延工期',
					disabled:false
				},{
					name:'施工工艺不规范',
					disabled:false
				},{
					name:'工地事故',
					disabled:false
				},{
					name:'无理由增项',
					disabled:false
				},{
					name:'其他',
					disabled:false
				},]
			}else{
				this.list = [{
					name:'设计不满意',
					disabled:false
				},{
					name:'故意拖工期',
					disabled:false
				},{
					name:'其他',
					disabled:false
				},]
			}
			
		},
		methods:{
			// 选择
			radioGroupChange(e){
				console.log(this.value,'000')
			},
			radioChange(e){
				console.log(this.value,'111')
			},
			
			// 输入描述
			changeText(e){
				// console.log(e,'输入描述')
				this.num = e.detail.cursor
			},
			
			// 选择上传视频按钮
			changeType(e){
				this.type = e == true ? 2 : 1
			},
			
			// 移除图片或视频
			removeImg(index){
				if(this.type==1){
					this.imgList.splice(index,1)
				}else{
					this.videoUrl = {}
				}
			},
			
			// 提交按钮
			submit(){
				if(this.value==''){
					uni.showToast({
						title:'请选择争议处理类型',
						icon:'none'
					})
					return
				}
				
				if(this.appeal_desc==''){
					uni.showToast({
						title:'请输入争议描述',
						icon:'none'
					})
					return
				}
				
				
				let arr = []
				if(this.type==1){
					this.imgList.map(item=>{
						arr.push(item.id)
					})
				}else{
					arr.push(this.videoUrl.id)
				}
				
				// 如果没有上传媒体内容，type=0
				if(!arr.length){
					this.type = 0
				}
				
				if(this.orderType=='builder'){//施工单
					let params = {
						order_id:this.data.id,
						order_no:this.data.order_no,
						order_status:this.data.status,
						order_amount:this.data.contract_price,
						team_id:this.data.team_id,
						decoration_id:this.data.decoration_id,
						partner_type:this.data.team_id?1:2,
						partner_name:this.data.team_name,
						partner_phone:this.data.team_phone,
						client_name:this.data.realname,
						client_phone:this.data.phone,
						appeal_type:this.value,
						appeal_desc:this.appeal_desc,
						type:this.type,
						media:arr.join(',')
					}
					service_decoration.appealAddBuild(params).then(res=>{
						console.log(res,'申诉添加')
						if(res.code==1){ 
							uni.showToast({
								title:'申诉成功',
								icon:'success'
							})
							setTimeout(function(){
								uni.navigateBack({
									delta:1
								})
							},300)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
				}else{ //设计单
					let params = {
						order_id:this.data.id,
						order_no:this.data.order_no,
						order_status:this.data.status,
						order_amount:this.data.contract_price,
						designer_id:this.data.designer_id,
						decoration_id:this.data.decoration_id,
						partner_type:this.data.designer_id?1:2,
						partner_name:this.data.designer_name,
						partner_phone:this.data.designer_phone,
						client_name:this.data.realname,
						client_phone:this.data.phone,
						appeal_type:this.value,
						appeal_desc:this.appeal_desc,
						type:this.type,
						media:arr.join(',')
					}
					service_decoration.appealAddDesgin(params).then(res=>{
						console.log(res,'申诉添加')
						if(res.code==1){
							uni.showToast({
								title:'申诉成功',
								icon:'success'
							})
							setTimeout(function(){
								uni.navigateBack({
									delta:1
								})
							},300)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
				}
				
			},
			
			// 上传
			uploadFN(){
				if(this.type==1){
					uni.chooseImage({
						count:1,
					    success: (res) => {
					        const tempFilePaths = res.tempFilePaths;
							console.log(res)
							// if(res.tempFiles.size>)
					        uni.uploadFile({
					            url: URL.ENTER_UPLOAD_IMAGE,
					            filePath: tempFilePaths[0],
					            name: 'file',
					            formData: {
					                'user': 'test'
					            },
					            success: (uploadFileRes) => {
									uni.showLoading({
										title:'上传中'
									})
					                console.log(uploadFileRes.data);
									let data = JSON.parse(uploadFileRes.data)
									if(data.code==1){
										let obj = {
											path:data.data.url,
											id:data.data.id
										}
										this.imgList.push(obj)
										// uni.showToast({
										// 	title:'上传成功',
										// 	icon:'success'
										// })
									}else{
										uni.showToast({
											title:data.msg,
											icon:'none'
										})
									}
									setTimeout(function(){
										uni.hideLoading()
									},500)
					            }
					        });
					    }
					});
				}else{
					uni.chooseVideo({
					    count: 1,
					    sourceType: ['camera', 'album'],
					    success:res=>{
					       const tempFilePaths = res.tempFilePath;
						   console.log(tempFilePaths)
					       uni.uploadFile({
					           url: URL.ENTER_UPLOAD_IMAGE,
					           filePath: tempFilePaths,
					           name: 'file',
					           success: (uploadFileRes) => {
					       		uni.showLoading({
					       			title:'上传中'
					       		})
					               console.log(uploadFileRes.data);
					       		let data = JSON.parse(uploadFileRes.data)
					       		if(data.code==1){
									console.log(data)
					       			let obj = {
					       				path:data.data.url,
					       				id:data.data.id
					       			}
					       			this.videoUrl = obj
					       			// uni.showToast({
					       			// 	title:'上传成功',
					       			// 	icon:'success'
					       			// })
					       		}else{
					       			uni.showToast({
					       				title:data.msg,
					       				icon:'none'
					       			})
					       		}
					       		setTimeout(function(){
					       			uni.hideLoading()
					       		},500)
					           }
					       });
					    }
					});
				}
			},
			
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	.addAppeal{
		height: 100%;
		background-color: #fff;
		position: relative;
		.topImg{
			width: 100%;
			height: 296rpx;
			position: absolute;
			top: 0;
			left: 0;
			background: url(http://manager.ryz1620.com/static/constr/orderBg.png) no-repeat;
			background-size: 100%;
			.topBg{
				width: 100%;
				position: absolute;
				bottom: -2rpx;
				left: 0;
				height: 88rpx;
				background-color: #fff;
				border-radius: 40rpx 40rpx 0 0;
			}
		}
		.content{
			padding: 0rpx 33rpx;
			margin-bottom: 160rpx;
			background-color: #fff;
			.title{
				font: bold 38rpx/38rpx PingFang SC;
				color: #101010;
			}
			.u-radio-group{
				display: flex;
				flex-direction: column;
				.u-radio{
					margin-top: 50rpx;
				}
			}
			.text{
				padding: 30rpx 22rpx;
				margin-top: 30rpx;
				width: 100%;
				min-height: 320rpx;
				border: 2rpx solid #ECECEC;
				border-radius: 10px;
				background-color: #FAFAFA;
				position: relative;
				.num{
					position: absolute;
					right: 22rpx;
					bottom: 30rpx;
					font: 500 22rpx/22rpx PingFang SC;
					color: #9E9E9E;
				}
				.mediaBox{
					width: 530rpx;
					margin-bottom: 20rpx;
					display: grid;					grid-template-columns: repeat(3, 1fr);					grid-gap: .5rem;
					
					.imgBox{
						position: relative;
						width: 140rpx;
						height: 140rpx;
						border-radius: 8rpx;
						image{
							width: 140rpx;
							height: 140rpx;
							border-radius: 8rpx;
						}
					}
					.videoBox{
						width: 530rpx;
						position: relative;
						video{
							width: 100%;
							height: 300rpx;
							border-radius: 8rpx;
						}
					}
					.uploadBox{
						width: 140rpx;
						height: 140rpx;
						border-radius: 8rpx;
						border: 1rpx dashed #9E9E9E;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						image{
							width: 48rpx;
							height: 48rpx;
						}
						font: 500 26rpx/32rpx PingFang SC;
						color: #9E9E9E;
					}
				}
			}
		}
		.btn{
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 24rpx 0;
			width: 100%;
			z-index: 10;
			background-color: #fff;
			box-shadow: 0px 2rpx 14rpx 0px #F1F1F1;
			button{
				width: 580rpx;
				height: 80rpx;
				background: linear-gradient(216deg, rgba(254, 210, 98, 0.94), rgba(239, 191, 63, 0.94));
				border-radius: 40rpx;
				font: 500 32rpx/80rpx PingFang SC;
				color: #402200;
			}
		}
	}
</style>
